import {useNavigate} from "react-router-dom";
import type {UserInfoType} from "@src/services/userinfo.ts";
import Return2Icon from "@src/assets/return2.svg?react"
import "./index.scss"
import {motion} from "framer-motion";
import SetUserinfo from "@src/pages/userinfo/_components/setUserinfo";
import {useState} from "react";

// import QrLogin from "@src/components/qrLogin";
export default function Userinfo() {
    const navigate = useNavigate();
    const {user}: UserInfoType = JSON.parse(localStorage.getItem("UserData") as string)
    const logOu = () => {
        localStorage.removeItem("UserData")
        sessionStorage.clear()
        navigate("/logIn");
    }
    const [isOpen, setIsOpen] = useState(false);

    return (
        <motion.div
            className="userinfo"
            initial={{opacity: 0}} // 初始状态：完全透明
            animate={{opacity: 1}} // 进入动画：逐渐变为完全不透明
            transition={{duration: 0.3}} // 动画持续时间
        >
            <div className="head">
                <div className="centered" onClick={() => navigate(-1)}>
                    <Return2Icon></Return2Icon>
                </div>
                <img src={user.avatar} alt=""/>
            </div>
            <div className="content">
                <img className="userHead" src={user.avatar} alt="" onClick={() => setIsOpen(true)}/>
                <ul className="infoUl" onClick={() => setIsOpen(true)}>
                    <li>
                        <p>邮箱</p>
                        <p>{user.email}</p>
                        <p></p>
                    </li>
                    <li>
                        <p>名称</p>
                        <p className="text-overflow-1">{user.name}</p>
                        <p><Return2Icon></Return2Icon></p>
                    </li>

                    <li>
                        <p>性别</p>
                        {user.gender ? <p>{user.gender == "female" ? "男" : "女"}</p> :
                            <p style={{color: '#b5b5b5'}}>选择性别,表达自我</p>}
                        <p><Return2Icon></Return2Icon></p>
                    </li>
                    <li>

                        <p>生日</p>
                        {user.birthdate ? <p>{user.birthdate}</p> :
                            <p style={{color: '#b5b5b5'}}>生日当天会收到平台的祝福</p>}
                        <p><Return2Icon></Return2Icon></p>
                    </li>
                </ul>

                <ul>

                    <li>
                        <button type="submit" onClick={logOu} className="z-button">退出登录</button>
                    </li>
                </ul>
            </div>
            <SetUserinfo isOpen={isOpen} setIsOpen={setIsOpen}></SetUserinfo>

        </motion.div>
    )
}
